﻿
<!doctype html>
<html lang="en-au">
<head>
    <title>jQuery.Gantt</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
    <link rel="stylesheet" href="css/style.css" />
    <style type="text/css">
        body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 13px;
            padding: 0 0 50px 0;
        }

        .contain {
            width: 800px;
            margin: 0 auto;
        }

        h1 {
            margin: 40px 0 20px 0;
        }

        h2 {
            font-size: 1.5em;
            padding-bottom: 3px;
            border-bottom: 1px solid #DDD;
            margin-top: 50px;
            margin-bottom: 25px;
        }

        table th:first-child {
            width: 150px;
        }
    </style>
</head>
<body>
   
   <textarea name="value" id="value" rows="10" cols="200"></textarea>
   <br />
   <button onclick="reload()">录入值，点击按钮，渲染甘特图</button>



    <div class="gantt"></div>

</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>

<script>
    var source = [];

		$(function() {

			"use strict";

			$(".gantt").gantt({
			    source: source,
				navigate: 'scroll',//导航类型：按钮和滚动条 buttons/scroll
				scale: "days",// months days  weeks//显示单元
				maxScale: "days",//视图缩放最大单元
				minScale: "days",//视图缩放最小单元
                months:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],//月份对应的显示字符
                dow:["日", "一", "二", "三", "四", "五", "六"],//周日到周一的显示字符
                waitText:"Data loading .......",//在数据加载是提示信息
                scrollToToday:true, //是否滚动到当天
				itemsPerPage: 100,//每页显示项目数
                //点击时执行的操作，参数是被点击项目相关联的数据对象
				onItemClick: function(data) {
				},
                //在空白格子点击时执行的函数第一个参数是点击点对应时间的毫秒数，第二个参数对象的id
				onAddClick: function(dt, rowId) {
				},
                //甘特图渲染完毕后执行的操作
				onRender: function() {
					if (window.console && typeof console.log === "function") {
						console.log("chart rendered");
					}
				}
			});


		});

function reload(){
    var json = $("#value").val();
    source = JSON.parse(json);

                $(".gantt").gantt({
                source: source,
                navigate: 'scroll',//导航类型：按钮和滚动条 buttons/scroll
                scale: "days",// months days  weeks//显示单元
                maxScale: "days",//视图缩放最大单元
                minScale: "days",//视图缩放最小单元
                months:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],//月份对应的显示字符
                dow:["日", "一", "二", "三", "四", "五", "六"],//周日到周一的显示字符
                waitText:"Data loading .......",//在数据加载是提示信息
                holidays: ["/Date(1588262400000)/","/Date(1588348800000)/","/Date(1588435200000)/","/Date(1588521600000)/","/Date(1588608000000)/","/Date(1589040000000)/","/Date(1589558400000)/","/Date(1589644800000)/","/Date(1590163200000)/","/Date(1590249600000)/","/Date(1590768000000)/","/Date(1590854400000)/","/Date(1591372800000)/","/Date(1591459200000)/","/Date(1591977600000)/","/Date(1592064000000)/","/Date(1592582400000)/","/Date(1592668800000)/","/Date(1593014400000)/","/Date(1593100800000)/","/Date(1593187200000)/"],
                scrollToToday:true, //是否滚动到当天
                itemsPerPage: 100,//每页显示项目数
                //点击时执行的操作，参数是被点击项目相关联的数据对象
                onItemClick: function(data) {
                    console.log(data);
                },
                //在空白格子点击时执行的函数第一个参数是点击点对应时间的毫秒数，第二个参数对象的id
                onAddClick: function(dt, rowId) {
                },
                //甘特图渲染完毕后执行的操作
                onRender: function() {
                    if (window.console && typeof console.log === "function") {
                        console.log("chart rendered");
                    }
                }
            });
}

</script>

</html>